<script setup>
import FirstTitle from "@comp/FirstTitle";
import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
import { onMounted } from "vue";
import { searchDataJbfa } from "@/api/search";
import { addOrUpdateJbfa } from "@/api/addOrUpdate";

const city = window.globalObj.name;
const editorRef = shallowRef();
const editorRef1 = shallowRef();
const editorRef2 = shallowRef();
const editorRef3 = shallowRef();
const editorRef4 = shallowRef();
const valueHtml = ref(
  "<p>主要明确行动目的、行动原则、行动方法、防护布局等内容。</p>"
);
const valueHtml1 = ref(
  "<p>全力抗击敌空袭，确保重要目标和人民生命财产安全，确保社会生产和生活秩序稳定运行。</p>"
);

const valueHtml2 = ref("<p>突出重点，综合防护。</p>");
const valueHtml3 = ref(
  `<p>走：临战疏散。战争爆发前，根据上级命令，县（区）各机关、企事业单位、学校、社区应按片区划分，有组织地安排老、弱、病、残、妇、幼迅速向指定地区域进行疏散，并负责安排好隐蔽及生活。城市人口的XX%人员疏散到城外郊区，XX%人员留城隐蔽或坚持工作。选择疏散地域既要考虑人员能疏散隐蔽，又要便于交通保障和生活保障。市级各部门人员的临战疏散按《XX》指定内容，划分为XX个方向，分别向XX、XX、XX疏散，XX作为备用地域。具体疏散计划见${city}临战疏散计划图。接收安置计划按《XX》指定内容开展。各县的临战疏散计划自行拟定。<br/>紧急疏散。当接到防空袭预先警报后，各级防空指挥部及内设机构成员进入基本指挥所，预备指挥所及内设机构成员按指定的区域迅速进入位置，相关部门的人员应迅速按指挥部确定的地域进行疏散。当接到防空袭紧急警报后，所有人员要迅速隐蔽，有地下人防工程的进入地下人防工程隐蔽，没有地下人防工程或来不及进入地下人防工程的人员按照划分的区域就近就地疏散隐蔽。紧急疏散图见${city}紧急疏散计划图。<br/>藏：做好人防工程内的防护，有效掩蔽人员和重要物资。进入工程后要服从命令，按指定位置坐卧，保持安静，减少剧烈活动；不得擅自起动人防工程设备设施，以防造成事故。在敌人实施核武器、化学武器、生物武器袭击时，人员不得出入人防工程，防止外部染毒空气和放射性物质被带入人防工程。<br/>防：一级目标：XX、XX、XX、XX、XX、XX。二级目标：XX、XX、XX。三级目标：XX、XX、XX、XX、XX、XX、XX。<br/>消：市级要组建XX支传统专业队伍和XX支新型专业队伍，战时担负抢险抢修、医疗救护、防火灭火、防疫灭菌、消毒和消除沾染、保障通信联络、抢救人员和抢运物资、维护社会治安、心理防护、信息防护和伪装防护等任务。平时，按XX‰的比例组建，战时，根据防空袭斗争的需要，各专业队伍按XX倍比例扩建。各县（区）要组建人防合成专业队伍。</p>`
);

const valueHtml4 = ref(
  "<p>重点防护区域：XX区、XX区、XX区、XX区。<br/>一般防护区域：XX区、XX县、XX县、XX县、XX县。</p>"
);

const toolbarConfig = {};
const editorConfig = { placeholder: "请输入内容..." };
const toolbarConfig1 = {};
const toolbarConfig2 = {};
const toolbarConfig3 = {};
const toolbarConfig4 = {};
const mode = ref("default");
const mode1 = ref("default");
const mode2 = ref("default");
const mode3 = ref("default");
const mode4 = ref("default");

// 加载html
const initHtml = () => {
  searchDataJbfa({ m: "行动指导" }).then((res) => {
    if (res.code !== 200) return ElMessage.error(res.msg);
    const { data } = res;
    valueHtml.value = data.find((x) => x.k === "行动指导引言")?.v || "";
    valueHtml1.value = data.find((x) => x.k === "行动目的")?.v || "";
    valueHtml2.value = data.find((x) => x.k === "行动原则")?.v || "";
    valueHtml3.value = data.find((x) => x.k === "行动方法")?.v || "";
    valueHtml4.value = data.find((x) => x.k === "防护布局")?.v || "";
  });
};

const handleCreated = (editor) => {
  editorRef.value = editor; // 记录 editor 实例，重要！
};
const handleCreated1 = (editor) => {
  editorRef1.value = editor; // 记录 editor 实例，重要！
};

const handleCreated2 = (editor) => {
  editorRef2.value = editor; // 记录 editor 实例，重要！
};

const handleCreated3 = (editor) => {
  editorRef3.value = editor; // 记录 editor 实例，重要！
};

const handleCreated4 = (editor) => {
  editorRef4.value = editor; // 记录 editor 实例，重要！
};

// 保存
const saveProgramme = () => {
  ElMessageBox.confirm(`确定要保存吗?`, "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    customClass: "message-box",
  }).then(() => {
    addOrUpdateJbfa({
      m: "行动指导",
      data: [
        {
          k: "行动指导引言",
          v: valueHtml.value,
        },
        {
          k: "行动目的",
          v: valueHtml1.value,
        },
        {
          k: "行动原则",
          v: valueHtml2.value,
        },
        {
          k: "行动方法",
          v: valueHtml3.value,
        },
        {
          k: "防护布局",
          v: valueHtml4.value,
        }
      ],
    })
      .then(() => {
        ElMessage.success("操作成功");
      })
      .catch(() => {});
  });
};

onMounted(() => {
  initHtml();
});

onBeforeUnmount(() => {
  const editor = editorRef.value;
  const editor1 = editorRef1.value;
  const editor2 = editorRef2.value;
  const editor3 = editorRef3.value;
  const editor4 = editorRef4.value;
  if (!editor) return;
  if (!editor1) return;
  if (!editor2) return;
  if (!editor3) return;
  if (!editor4) return;
  editor.destroy();
  editor1.destroy();
  editor2.destroy();
  editor3.destroy();
  editor4.destroy();
});
</script>
<template>
  <div>
    <FirstTitle name="引言" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>

    <FirstTitle name="行动目的" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef1"
        :defaultConfig="toolbarConfig1"
        :mode="mode1"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml1"
        :defaultConfig="editorConfig"
        :mode="mode1"
        @onCreated="handleCreated1"
      />
    </div>

    <FirstTitle name="行动原则" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef2"
        :defaultConfig="toolbarConfig2"
        :mode="mode2"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml2"
        :defaultConfig="editorConfig"
        :mode="mode2"
        @onCreated="handleCreated2"
      />
    </div>

    <FirstTitle name="行动方法" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef3"
        :defaultConfig="toolbarConfig3"
        :mode="mode3"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml3"
        :defaultConfig="editorConfig"
        :mode="mode3"
        @onCreated="handleCreated3"
      />
    </div>

    <FirstTitle name="防护布局" class="top-15" />
    <div style="border: 1px solid #ccc" class="top-15">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef4"
        :defaultConfig="toolbarConfig4"
        :mode="mode4"
      />
      <Editor
        style="height: 500px; overflow-y: hidden"
        v-model="valueHtml4"
        :defaultConfig="editorConfig"
        :mode="mode4"
        @onCreated="handleCreated4"
      />
    </div>

    <div class="flex-justify-end top-20">
      <el-button type="primary" class="save-btn" @click="saveProgramme"
        >保存</el-button
      >
    </div>
  </div>
</template>
<style scoped lang="scss">
.zddj {
  font-size: 14px;
}
</style>
